<!-- src/views/LoginView.vue -->
<template>
  <div class="login-container">
    <h2>授权服务器登录</h2>
    <div class="auth-providers">
      <AuthButton
          v-for="config in clientConfigs"
          :key="config.id"
          :config="config"
          @auth-clicked="startAuth(config)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import AuthButton from '@/components/AuthButton.vue';
import { getClientConfigs } from '@/services/api';

const router = useRouter();
const clientConfigs = ref([]);

onMounted(async () => {
  try {
    const response = await getClientConfigs();
    clientConfigs.value = response.data;
  } catch (error) {
    console.error('获取配置失败', error);
  }
});

const startAuth = (config) => {
  window.location.href = `${import.meta.env.VITE_AUTH_URL}/${config.provider}?client_id=${config.clientId}`;
};
</script>